<template>
    <div class="header">
        <div class="header-top">
            <div class="header-top-left">
                <i class="el-icon-s-unfold" @click="changeUnfold" v-if="isCollapse"></i>
                <i class="el-icon-s-fold" @click="changeUnfold" v-else></i>
                <div class="xianshi">首页</div>
            </div>
            <div class="header-top-right">
                <img src="@/assets/logo.png" alt="">
                <!-- 下拉框 -->
                <div class="xiala">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="/">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="contn">
                <el-tag :key="tag.name" v-for="tag in routerDatas" :closable="routerDatas.length>1?true:false" :disable-transitions="false" :effect="tag.show?'dark':'light'"
                    @close="handleClose(tag)" @click="select(tag)">
                    {{tag.name}}
                </el-tag>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                // dynamicTags: ['标签一', '标签二', '标签三']
            }
        },
        computed: {
            isCollapse: function () {
                // console.log();
                return this.$store.state.unfold
            },
            routerDatas:function (){
                return this.$store.state.routerData
            }
        },
        methods: {
            changeUnfold() {
                // console.log(this.$store.state.unfold);
                if (this.$store.state.unfold) {
                    this.$store.commit("changeA", false)
                } else {
                    this.$store.commit("changeA", true)
                }
            },
            handleClose(tag) {
                this.routerDatas.splice(this.routerDatas.indexOf(tag.name), 1);
            },
            select(tag){
                console.log(tag.path);
                this.$router.push(tag.path)
                  this.$store.commit("changetag",tag.path)
            },
            handleCommand(command){
                console.log(command);
                // 清除sessionStage信息
                sessionStorage.clear()
                //路由的链式跳转
                    this.$router.replace(command)
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .header {

        // color: red;
        .header-top {
            display: flex;
            justify-content: space-between;
            padding: 20px 20px;
            border: 1px solid red;
            // vertical-align: center;
            .header-top-left {
                display: flex;
                font-size: 20px;
                height: 20px;
                line-height: 20px;

                .xianshi {
                    margin-left: 20px;
                }
            }

            .header-top-right {
                display: flex;

                img {
                    width: 30px;
                    height: 30px;
                }
            }
        }

        .bottom {
            display: flex;
            padding: 5px 20px;
            width: 100%;
            height: 50px;
        }
    }
</style>